<template>
	<view class="withdraw">
		<view class="withdraw-head">
			<view class="withdraw-head-to">到账渠道</view>
			<view class="withdraw-head-way" style="flex: 1;">
				<view class="withdraw-head-way-1 flex">
					<text class="way-text">微信零钱</text>
					<view class="yticon icon-you"></view>
				</view>
				<view class="withdraw-head-way-2">仅支持整数，72小时内到账</view>
			</view>
		</view>
		<view class="withdraw-body">
			<text>充值金额</text>
			<view class="input-money">
				<text class="rmb">￥</text>
				<input :value="inputVal" type="number"  class="t-input" @input="keyInput"/>
			</view>
			<view class="info-money">
				<view v-if="is_lowest">
					<text class="info-money-num" style="color: #ff1e0f;">最低充值10元起哦</text>
				</view>
				<view v-else>
					<text class="info-money-num">最低充值金额10元</text>
				</view>
			</view>
			<view :class="'tx' + (is_post ? '-active' : '')"><button @click="handleShowModel">充值</button></view>
		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			inputVal: '',
			is_post:false,
			is_lowest:false,
		};
	},
	methods: {
		keyInput:function(e){
			this.inputVal = e.detail.value;
			console.log(this.inputVal)
			if(this.inputVal <= 9){
				this.is_lowest = true
			}else{
				this.is_lowest = false
				this.is_post = true
			}
		},
		handleShowModel:function(e){
			uni.showModal({
			    title: '确认充值',
			    success: function (res) {
			        if (res.confirm) {
			            uni.showToast({
			            	title:'充值成功',
			            	duration:1000
			            })
						setTimeout(function() {
							uni.navigateTo({
								url:'../wallet/wallet'
							})
						},1000);
						
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			});
			
		}
		
	},
	onPullDownRefresh() {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 500);
	}
};
</script>

<style lang="scss" scoped>
	.flex{display: flex;align-items: center;}
	.way-text{flex: 1;}
page {
	background-color: #ededed;
}
.withdraw {
	padding: 20px;
	&-head {
		background-color: #f7f7f7;
		display: flex;
		align-content: center;
		padding: 20px 30px;
		font-size: 14px;
		&-to {
		}
		&-way {
			display: flex;
			flex-direction: column;
			align-content: center;
			margin-left: 20px;
			&-1 {
				color: #576b95;
				margin-bottom: 10px;
				.way-icon {
					width: 16px;
					height: 16px;
					margin-right: 5px;
					top: 2px;
				}
			}
			&-2 {
				color: #acacac;
				font-size: 12px;
			}
		}
	}
	&-body {
		background-color: #fff;
		padding: 20px 30px;
		font-size: 14px;
		.input-money {
			display: flex;
			align-content: center;
			font-weight: 600;
			border-bottom: 0.5px solid #eaeef1;
			.rmb {
				font-size: 2em;
				top: 10px;
				position: relative;
			}
			.t-input {
				height: 1.9em;
				font-size: 2.5em;
				border: none;
				position: relative;
				left: 3.5%;
				outline: none;
			}
		}
		.info-money {
			margin-top: 10px;
			font-size: 12px;
			margin-bottom: 20px;
			&-num {
				color: #b2b2b2;
			}
			&-all {
				color: #576b95;
			}
		}
		.tx {
			button {
				color: #b2b2b2;
			}
		}
		.tx-active {
			button {
				color: #fff;
				background: #07c160;
			}
		}
	}
	.active {
		bottom: -400rpx;
	}
	.hide {
		opacity: 0;
	}
	.delte {
		background: none;
		box-shadow: none;
	}
	.delte image {
		width: 60rpx;
		height: 60rpx;
	}
	.isIphone {
		padding-bottom: 68rpx !important;
	}
	.fee {
		em {
			font-size: 0.5rem;
			font-style: normal;
		}
	}
}
</style>
